<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="/resource/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
<script src="/resource/bootstrap-treeview/js/bootstrap-treeview.js"></script>

<script type="text/javascript"
	src="${pageContext.request.contextPath}/resource/js/jquery.validate.js"></script>
<head>
<meta charset="UTF-8">
<title>spu修改页面</title>
</head>
<body>

	<form id="addForm">
		<div class="form-group row">

			<label for="parentName" class="col-sm-2 col-form-label">商品名称</label>
			<div class="col-sm-10">
				<input type="text" name="goodsName" class="form-control"
					style="width: 500px" id="parentName">
			</div>
		</div>
		<div class="form-group row">
			<label for="catPath" class="col-sm-2 col-form-label">标题</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" name="caption"
					style="width: 500px" id="catPath">
			</div>
		</div>



		<!-- 隐藏域,为了提交分类id的 -->
		<input type="hidden" name="categoryId" id="categoryId" value="">
		<div class="form-group row">
			<label for="catName" class="col-md-2 col-form-label">分类</label>
			<div class="col-sm-10">
				<input type="text" readonly class="form-control"
					style="width: 500px" id="catId">

			</div>
			<button type="button"
				style=" top: 300px; right: 300px;margin-right: 90px;"
				class="btn btn-primary" onclick="showCat()">选择分类</button>
		</div>


		<!-- 这里就是现实分类树的地方 -->
		<div class="form-group row">

			<div class="col-sm-10" id="tree"
				style="display: none; position: absolute; z-index: 1000; width: 90%">
			</div>


		</div>

		<div class="form-group row">
			<legend class="col-form-label col-sm-2 pt-0">是否上架</legend>
			<div class="col-sm-10">
				<div class="form-check">
					<input class="form-check-input" type="radio" name="isMarketable"
						id="gridRadios1" value="1" checked>
					&nbsp;&nbsp;&nbsp;&nbsp;上架
				</div>
				<div class="form-check">
					<input class="form-check-input" type="radio" name="isMarketable"
						id="gridRadios2" value="0"> &nbsp;&nbsp;&nbsp;&nbsp;不上架
				</div>
			</div>
		</div>

		<div class="form-group row">
			<label for="exampleFormControlSelect1"
				class="col-sm-2 col-form-label">品牌</label> <select
				style="width: 500px" name="brandId" class="form-control"
				id="exampleFormControlSelect1">
				<option value="0">请选择</option>
				<c:forEach items="${brands }" var="b">
					<option value="${b.id}">${b.name }</option>
				</c:forEach>

			</select>
		</div>

		<div class="form-group">
			<input type="file" name="picFileName" class="form-control-file"
				id="exampleFormControlFile1">
		</div>
		<button type="submit" class="btn btn-primary">添加</button>
	</form>
	<script type="text/javascript">
	//使用validate校验前端
	$("#addForm").validate({
		rules : {
			goodsName : {
				required :true,

			},
			caption:{
				required:true,
				maxlength:255,
				minlength:3
			},
			picFileName:{
				required:true
			}

		},
		messages : {
			goodsName : {
				required :"不能为空",

			},
			caption:{
				required:"不能为空",
				maxlength:"最大是255个字段",
				minlength:"最大是3个字段"
			},
			picFileName:{
				required:"不能为空"
			}
			
			
		},
		submitHandler : function(data){
			var formData = new FormData($("#addForm")[0]);
			$.ajax({
				url : './spu/add',
				type : 'post',
				data : formData,
				processData : false,
				contentType : false,
				success : function(resp) {
					if (resp) {
						alert("success!!!")
						$("#workArea").load("./spu/list")
					} else {
						alert("fail!!!!!!!")
					}
				}
			})
		}
		
		
		
	})
	function showCat() {
		$("#tree").show(500);   //显示
	}
	//初始化树
	initTree();
	function initTree() {

		$.post("cat/getTree", function(data) {

			$('#tree').treeview({
				data : data,
				levels : 2,
				onNodeSelected : function(event, data) {
					$("#catId").val(data.text);
					$("#categoryId").val(data.id);//为分类id赋值
					$("#tree").hide(1000);
				}
			});

		})

	}
	</script>
</body>
</html>